<template>
    <h2>优惠券</h2>
    <table border="1">
        <tr>
            <td>折扣劵标题</td>
            <td>
                <input type="text" placeholder="请输入折扣劵标题" v-model="info.Discount_Tittle"/>
            </td>
        </tr>
        <tr>
            <td>折扣劵颜色</td>
            <td>
                <input type="text" placeholder="请输入折扣劵颜色" v-model="info.Discount_Color"/>
            </td>
        </tr>
        <tr>
            <td>剩余库存量</td>
            <td>
                <input type="text" placeholder="请输入剩余库存量" v-model="info.Discount_Num"/>
            </td>
        </tr>
        <tr>
            <td>每人限领</td>
            <td>
                <input type="text" placeholder="请输入每人限领" v-model="info.Discount_Limited"/>
            </td>
        </tr>
        <tr>
            <td>使用条件</td>
            <td>
                <input type="text" placeholder="请输入使用条件" v-model="info.Discount_Use"/>
            </td>
        </tr>
        <tr>
            <td>折扣</td>
            <td>
                <input type="text" placeholder="请输入折扣" v-model="info.Discount_Discount"/>
            </td>
        </tr>
        <tr>
            <td>开始日期</td>
            <td>
                <input type="date"  v-model="info.Discount_StartTime"/>
            </td>
        </tr>
        <tr>
            <td>结束时间</td>
            <td>
                <input type="date"  v-model="info.Discount_EndTime"/>
            </td>
        </tr>
        <tr>
            <td>适用业务</td>
            <td>
                <input type="text" placeholder="请输入适用业务" v-model="info.Discount_Business"/>
            </td>
        </tr>
        <tr>
            <td>使用须知</td>
            <td>
                <textarea v-model="info.Discount_Precautions"></textarea>
            </td>
        </tr>
        <tr>
            <td>客服电话</td>
            <td>
                <input type="text" placeholder="请输入客服电话" v-model="info.Discount_Phone"/>
            </td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <img style="width:70px;height:80px;" :src="info.ImgUrl"/>
                <input type="file" @change="Tu"/>
            </td>
        </tr>
        <tr>
            <td>门店</td>
            <td>
                <select v-model="info.Shop_Id">
                    <option :value="0">请选择</option>
                    <option  v-for="item in xia" :value="item.Shop_Id">{{item.Shop_Name}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="添加" @click="Add"/>
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">

    import {ref,onMounted} from 'vue';

    import axios from 'axios';

    const info=ref({
    Discount_Tittle: "",
    Discount_Color: "",
    Discount_Num: 0,
    Discount_Limited: 0,
    Discount_Use: "",
    Discount_Discount: 0,
    Discount_StartTime: "",
    Discount_EndTime: "",
    Discount_Business: "",
    Discount_Precautions: "",
    Discount_Phone: "",
    ImgUrl:"",
    Shop_Id: 1
    });

    const xia=ref({
        Shop_Id:0,
        Shop_Name:""
    });

    onMounted(()=>{
        XiaLa();
    });

    const XiaLa=()=>{
        axios.get("https://localhost:7153/api/Member/GetShopXialA/GetShopXialA")
        .then(res=>{
            xia.value=res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    const Add=()=>{
        axios.post("https://localhost:7153/api/Member/AddDiscount/AddDiscount",info.value)
        .then(res=>{
            if(res.data==-1){
                alert('已存在');
            }
            else if(res.data>0){
                alert('添加成功');
            }
            else{
                alert('添加失败');
            }
        })
    }

    const Tu=(e:any)=>{
        var file=e.target.files[0];
        var fd=new FormData();
        fd.append("Files",file);
        axios.post("https://localhost:7153/api/Files/FileUpload",fd)
        .then(res=>{
            console.log(res.data);
            info.value.ImgUrl=res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }

</script>
